<template>
  <el-card shadow="never" class="aui-card--fill">

    <el-table
        :data="userLit"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="管理员名字">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="真实姓名">
              <span>{{ props.row.realName }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.mobile }}</span>
            </el-form-item>
            <el-form-item label="管理员性别">
              <span>{{ props.row.gender == 0 ? '女' : props.row.gender == 1 ? '男' : '未知' }}</span>
            </el-form-item>
            <el-form-item label="所属部门ID">
              <span>{{ props.row.deptId }}</span>
            </el-form-item>
            <el-form-item label="管理员 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="部门名字">
              <span>{{ props.row.deptName }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.updateDate }}</span>
            </el-form-item>
          </el-form>
          <el-button type="primary" round @click="dialogVisible = true">修改</el-button>
          <el-button type="danger" round @click="delete1(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="管理员"
          prop="username">
      </el-table-column>
    </el-table>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
  </el-card>
</template>
<script>
export default {
  created() {
    this.m1();
  }, data() {
    return {
      userCount: 0,
      userLit: [],
      id: 0,
      dialogVisible: false
    }
  }, methods: {
    m1() {
      this.$http.get('/sys/user/listAll', {
        // 解构赋值
      }).then(({data: res}) => {
        this.userCount = res.data.length;
        this.userLit = res.data
      }).catch(() => {
        // console.log(params)
      })
    }, delete1(index) {
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('/sys/user/deleteById', {params: {id: index}}).then(({data: res}) => {
          this.m1()
        }).catch(() => {
          console.log(res)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>